<template>
    <div class='dialog'>
        <div class='newAdd dialog-con updateUserList'>
                <div class="companynews">
                    <h2>用户修改</h2>
                </div>
            <div class="infomakeUSer qcfd">
                <div class="authbrand f-fl">
                    <div class="auth">
                        <span>*</span>
                        <label>用户名</label>
                        <el-input type="text" placeholder="请输入" v-model="makeUser.username"></el-input>
                    </div>
                    <div class="auth">
                        <span>*</span>
                        <label>密码</label>
                        <el-input type="text" placeholder="请输入" v-model="makeUser.password"></el-input>
                    </div>
                    <div class="auth">
                        <span>*</span>
                        <label>姓名</label>
                        <el-input type="text" placeholder="请输入" v-model="makeUser.name"></el-input>
                    </div>
                     <div class="auth">
                        <span>*</span>
                        <label>手机号</label>
                        <el-input type="text" placeholder="请输入" v-model="makeUser.mobile"></el-input>
                        <p v-if="u_phone" style="margin-left:80px;color:red;font-size:10px;" >*请输入正确的手机号</p>
                    </div>
                    <div class="auth">
                        <span>*</span>
                        <label>出生日期</label>
                        <el-input type="text" placeholder="请输入出生日期" v-model="makeUser.birthday" ></el-input>
                    </div>
                </div>
                <div class="uploadImg f-fl" >
                    <el-upload
                        class="avatar-uploader"
                        action="/api/erp/qny/pic/qiniu"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
            </div>
            <div class="confirm">
                <el-button  @click="userConfirm"  type="medium" style="margin-right:30px" size="medium">确定</el-button>
                <el-button  @click="cancel"  size="medium">取消</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import api from 'js/service'
import regular from 'js/regular'
import {localStorage} from "js/localStorage"
export default {
    inject:['reload'],
    data(){
        return{
            imageUrl: '',
            show:false,
            //v-model
            username:'',
            password:'',
            role:'',
            nickName:'',
            name:'',
            birthday:'',
            mobile:'',
            u_phone:false
        }
    },
    created(){
        this.init()
    },
    props:{
        makeUser:{
            type:Object,
            default:{}
        },
    },
    methods:{
        init(){
            this.userId= localStorage.get('userID')
        },
        //点击确定按钮，掉接口
        userConfirm(){
            if(!regular.phoneNumCheck(this.makeUser.mobile)){
               return  this.u_phone=true
            }else{
                this.u_phone=false
            }

            let parmas={
                username:this.makeUser.username,
                password:this.makeUser.password,
                name:this.makeUser.name,
                mobile:this.makeUser.mobile,
                birthday:this.makeUser.birthday,
                picture:this.makeUser.picture,
                id:this.makeUser.id,
                userId:this.userId,
                // roles:[roles]
            }
            let success=data=>{
                if(data.code=="OK"){
                    this.$message.success('保存成功')
                    this.$emit('closeDialog')
                    this.reload()
                }else{
                    this.$message.error(data.msg)
                }
            }
            api.sysUpdate(parmas,success)

        },
        cancel(){
            this.$emit('closeDialog')
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
        return isJPG && isLt2M;
      }
    }
}
</script>
<style>
.updateUserList .infomakeUSer .supplyinfomakeUSer .companyname label{
    width:92px;
}
.updateUserList .el-picker-panel .el-date-picker .el-popper{
    z-index: 2031;
    position: fixed;
    top: 160px;
    left: 1006px;
}
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-top:20px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<style lang="scss" scoped>
.updateUserList{
    width:650px;
    height:480px;
    .companynews{
        h2{
            height:60px;
            line-height: 60px;
            text-indent: 20px;
            font-size: 20px;
            width:100%;
        }
    }
    .infomakeUSer{
        margin-left:3%;
        height:auto;
        .authbrand{
            margin-right:10px;
            width:400px;
            .auth{
                margin-bottom: 6px;
                label{
                    width: 70px;
                    display: inline-block;
                    margin:23px 0 10px 0;
                    color:#606266;
                }
                .el-input{
                    height:38px;
                    width:250px;
                    font-size: 14px;
                    color:#606266;
                }
                span{
                    color:red;
                    text-align: center;
                }
            }
            .block{
                margin-top:20px;
                span{
                    width:100px;
                    display: inline-block;
                }
            }
        }
    }
    .confirm{
        margin-left:20%;
        margin-top:5%;
    }
}
</style>
